<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 300px;
            height: 300px;
            background-color: aqua;
            padding: 20px;
            margin: 100px;
            position: relative;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 5px solid skyblue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="box"></div>
    </div>
    
    <script>
        /*
            1、offSet 用于获取元素的尺寸
            offSetWidth:自己的宽度 内容width+padding+border
            offSetHeight:自己的高度 内容height+padding+border
            offSetLeft:获取第一个有定位的父亲盒子左边距离 从外边界开始算，padding+border不算入offSetLeft
            offSetTop:获取第一个有定位的父亲盒子上边距离
            offSetParent:返回当前对象的父级（带有定位）的盒子

            2、offSetxxx与style.xxx的区别
            1)style.xxx只能获取行内的，而offSetxxx可以获取所有的(获取尺寸常用offSetxxx)
            2)offSetxxx可以返回没有定位盒子距离左侧的的位置(margin),style.xxx不可以
            3)offSetxxx返回的是数字类型，而style.xxx返回的是字符串类型+px
            4)offSetxxx只读，style.xxx可读写(常用style.xxx给元素增添属性)
            5)如果没有给当前元素的定位，top样式，style.xxx返回的是空字符串
        */
       let box = document.getElementById('box');
       
        console.log(box.offsetWidth,box.offsetHeight)//130 130
        console.log(box.offsetLeft,box.offsetTop);
        //父盒子未做相对定位时:170 170
        //父盒子做相对定位时:70 70
        // console.log(box.offsetParent);//当父级定位position时，获取的父级不然就往上找，直到找到有定位的级，最终时body
        //box.parentNode直接获取父级元素
    </script>
</body>
</html>